.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  :before {
    content: ''
  }

  $dpr:             2 !default;

  @mixin bg($name) {
    &.icon-#{$name} {
      background-image: url(assets/icons/icon-#{$name}.png)
    }
  }

  $list: brand, category, shop, goods, fav, favorite, favorite-active, up, down, download, phone, password, filter, warning, go, star, export, export-o, more;

  @each $item in $list {
    @include bg($item)
  }
  &.icon-star {
    &:hover {
      background-image: url(assets/icons/icon-star-hover.png)
    }
    &.active {
      background-image: url(assets/icons/icon-star-active.png)
    }
  }
  &.icon-export {
    &:hover {
      background-image: url(assets/icons/icon-export-hover.png)
    }
  }
  &.icon-more {
    &:hover {
      background-image: url(assets/icons/icon-more-hover.png)
    }
  }
}
